<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插入和替换元素操作</title>
        <!-- 插入和替换元素操作：针对元素增删改操作 
        append()    功能：在匹配元素集合中的所有元素的内部末尾插入内容
        prepend()   功能：在匹配元素集合中的所有元素的内部开头插入内容
        
        after()     功能：在匹配元素集合中的所有元素的外部后面插入内容
        before()    功能：在匹配元素集合中的所有元素的外部前面插入内容
        
        remove()    功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
        empty()     功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
        
        replaceWith()-->
        <style>
            button{
                margin: 5px;
                padding: 10px 15px;
                cursor: pointer;
              }
            body{
                margin: 20px;
              }
            #target{
                border: 1px solid #1e1e2e;
                margin-left: 5px;
                padding: 10px;
                margin-top: 10px;
                bo rder-left: 10px;
                border-radius: 5px;
            }
			.boss{
			                background-color: #f8ff66;
			                background-image: url(../img/2.gif);
			                width: 300px;
			                height: 300px;
			                border-radius: 50%;
			                display: block;
			                color: transparent;
			                background-size: 100% 100%;
			            }
        </style>
        <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- html：7个按钮  div包含p包含：目标元素的初始段落 id="target"
                           div包含p包含：插入新元素的初始段落 id="newElement" 隐藏
             css：按钮：外边距5px，内边距：10px  15px 鼠标移动上去：手指显示
                            body:外边距20px
                            #target：1像素边框、内边距：10px、上边距：10px
             引入JQ                -->
        <button id="appendBtn">内部末尾插入元素</button>
        <button id="prependBtn">内部开头插入元素</button>
        <button id="afterBtn">外部后面插入元素</button>
        <button id="beforeBtn">外部前面插入元素</button>
        <button id="removeBtn">删除元素</button>
        <button id="emptyBtn">清空元素</button>
        <button id="replaceBtn">替换元素</button>
        <div id="target">
            <p>目标元素的初始段落 </p>
        </div>
        <div id="newElement" style="display: none;">
            <p>插入新元素的初始段落</p>
        </div>
        <script>
            /* 1.点击 内部末尾插入元素 按钮  p文本后面追加新元素中包含内容操作*/
            $("#appendBtn").click(function(){
                //效果：点击按钮  追加“新元素--自带内容”
                //1.1 追加的内容是新元素--克隆--html结构全部复制出来，元素包含属性
                var cpe=$("#newElement").clone();
                //clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
                //1.2自带的属性和属性值：隐藏--改成显示
                cpe.css("display","block");
                //1.3将复制出来的新元素，追加给当前的元素上
                $("#target").append(cpe);
            });
                      /* 2.点击 内部末尾插入元素 按钮  p文本后面追加新元素中包含内容操作*/
                      $("#prependBtn").click(function(){
                          var cpe=$("#newElement").clone();
                          cpe.css("display","block");
                          $("#target").prepend(cpe);
                      });
                      /* 3.点击 外部后面插入元素 按钮  p文本后面追加新元素中包含内容操作*/
                      /* + */
                      /* 4.点击 外部前面插入元素 按钮  生成 原型，保留背景色，文本不需要，背景图300*300*/
                       $("#beforeBtn").click(function(){
                          var cpe=$("#newElement").clone();
                          cpe.css({"background-color":"#ffe1f9",
                                   "background-image":"url(../img/2.gif)",
                                   "width":"300px",
                                   "height":"300px",
                                   "border-radius":"50%",
                                   "backgound-size":"100% 100%",
                                   "color":"transparent",
                                   "display":"block"
                               });
                          $("#target").before(cpe);
                      }); 
					  $("#afterBtn").click(function(){
					                  var cpe=$("#newElement").clone();
					                  cpe.addClass("boss");
					                  $("#target").after(cpe);
					              });
	                 $("#removeBtn").click(function(){
						 $("#target").remove();
					 });
					 
					 $("#emptyBtn").click(function(){
					 	$("#arget").empty();
					 }); 
					 $("#replaceBtn").click(function(){
						 //克隆 新元素 #newElement【父子级】
					var c=$("#newElement").clone().css("display","block");
					//替换 新元素 替换 目标元素
					$("#target").replaceWith(c);
					 });
        </script>
    </body>
</html>